<template>
	<view>
		<!-- 首页头部 -->
		<view>
			<uni-nav-bar title="首页" :backgroundColor="bgColor" :color="color" height="38"></uni-nav-bar>
		</view>
		<!-- 搜索栏 -->
		<view class="header_search">
			<u-search label="定位" actionText="搜索" :showAction="true"></u-search>
		</view>
		<!-- 轮播图 -->
		<view>
			<u-swiper 
				:list="carousels" 
				imgMode="aspectFit" 
				keyName="imgAddress" 
				height="180" 
				previousMargin="25" 
				nextMargin="25" 
				circular 
				bgColor="#F8F8F8" 
			></u-swiper>
		</view>  
		<!-- 技术布局 -->
		<view class="grid-box">
			<u-grid :border="false" col="4">
				<u-grid-item v-for="(item,index) in imgArr" :key="index">
					<image :src="item.img" class="grid-img"></image>
					<text class="grid-text">{{item.content}}</text>
				</u-grid-item>
			</u-grid>
		</view>
		<!--推荐课程-->
		<view class="courseItem">
			<view class="course">推荐课程</view>
			<view class="courseAll">
				<view class="courseOne" v-for="(item,index) in course" :key="index">
					<image :src="item.url" @click="selectCouseById(item.courseId,item.id)"></image>
					<view class="courseNam">
						<text class="courseName" @click="selectCouseById(item.courseId,item.id)">{{item.courseName}}</text>
					</view>
					<view class="courseNameAndmoney">
						<text class="name">{{item.trueName}}</text>
						<text class="money">￥{{item.courseNprice}}</text>
					</view>
					<view class="lookAndsale">
						<uni-icons type="eye-filled" size="16" color="#999999"></uni-icons>
						<text class="lookSum">{{item.lookNum}}</text>
						<uni-icons type="cart-filled" size="16" color="#999999"></uni-icons>
						<text class="SaleSum">{{item.saleNum}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>	
	import {selectJsCarousel} from "@/static/http/getData.js"
	
	import {selectJsCourse} from "@/static/http/getData.js"
	
	export default{
		data(){
			return{
				tabbar:0,
				bgColor:'#0DAB9D',
				color:'#FFFFFF',
				carousels:[],
				imgArr:[
					{img:'../../static/index/java.svg',content:'JAVA'},
					{img:'../../static/index/vue.svg',content:'Vue'},
					{img:'../../static/index/linux.svg',content:'Linux'},
					{img:'../../static/index/redis.svg',content:'Redis'},
					{img:'../../static/index/PS.svg',content:'PS'},
					{img:'../../static/index/js.svg',content:'JavaScript'},
					{img:'../../static/index/yuanxing.svg',content:'原型模式'},
					{img:'../../static/index/moshi.svg',content:'素质教育'}
				],
				course:[]
			}
		},
		onLoad(){
			this.initData();
			this.selectCourse();
		},
		methods:{
			initData(){
				var data={
					display:1
				};
				selectJsCarousel(data).then(res=>{
					this.carousels = res.data.data;
				})
			},
			selectCourse(){
				var data = {
					courseStatus:2,
					orderStatus:3,
					orderType:2
				};
				selectJsCourse(data).then(res=>{
					this.course=res.data.data;
				})
			},
			toIndexHome(){
				uni.redirectTo({
					url:"/pages/index/index-index"
				})
			},
			selectCouseById(courseId,id){
				uni.navigateTo({
					url:"/pages/index/courseDetails?courseId="+courseId+"&id="+id
				})
			}
		}
	}
</script>
<style>
	.header_search{
		height:38px;
		background-color:#FFFFFF;
	}
	.grid-img{
		width:38px;
		height:30px;
		padding-top:10px;
	}
	.grid-text{
		font-size:13px;
		color: #808080;
	}
	.grid-box{
		width:100%;
		height:170px;
		background-color:#FFFFFF;
	}
	.courseItem{
		margin: 0 auto;
		width:100%;
		height:100%;
		margin:0 auto;
	}
	.course{
		height:40px;
		font-size:16px;
		text-align:center;
		background-color:#FFFFFF;
	}
	.courseAll{
		margin:0 auto;
		width:94%;
		float: left;
		margin-bottom:60px;
	}
	.courseOne{
		width:44%;
		height:180px;
		float:left;
		border-radius:15px;
		background-color:#FFFFFF;
		margin:14px 0px 0px 6%;
	}
	.courseOne image{
		width:100%;
		height:40%;
		border-top-right-radius:15px;
		border-top-left-radius:15px;
	}
	.courseOne text{
		font-size:12px;
		padding-left:10px;
	}
	.courseNam{
		height:50px;
	}
	.courseNameAndmoney .name{
		color:#999999;
		font-size:12px;
		float:left;
	}
	.courseNameAndmoney .money{
		font-size:12px;
		color:#FF6F00;
		float: right;
		padding-right:20px;
	}
	.lookAndsale{
		font-size:12px;
		color:#999999;
	}
	
</style>